<template>
    <Card style="font-family:PMingLiU,Helvetica,sans-serif;font-size: 100%">
        <Row :gutter="16">
            <Col :span="span1">
                <div v-show="showBox">
                    <Card style="font-size: 18px" :bordered="false" :dis-hover="true">
                        <p slot="title" style="height: 33px">
                            <Row>
                                <Col style="font-size: 18px" span="18">
                                    <ButtonGroup>
                                        <Button type="ghost" @click="printMedical">打印病历</Button>
                                        <Button type="ghost" @click="printExecute">打印医嘱</Button>
                                        <Button type="ghost" @click="printCourse">打印病程记录</Button>
                                    </ButtonGroup>
                                </Col>
                                <Col align="right" span="6">
                                    <a href="#">切换患者</a>
                                </Col>
                            </Row>
                        </p>
                        <Row>
                            <Col span="6">
                                <Row>
                                    <Col>
                                        <Avatar style="width: 100%;height: 150px" src="https://i.loli.net/2017/08/21/599a521472424.jpg" shape="square" />
                                    </Col>
                                </Row>
                                <Row>
                                    <Col>
                                        <Tag align="center" style="width: 100%;font-size: 13px" color="blue">{{formItem.medicalNumber | valueFilter}}</Tag>
                                    </Col>
                                </Row>
                            </Col>
                            <Col span="18">
                                <Carousel v-model="selectCarousel">
                                    <CarouselItem style="padding-right: 30px">
                                        <Row >
                                            <Col span="6" class="code-row-col-name">姓名</Col>
                                            <Col span="18" class="code-row-col-value">{{formItem.name}}</Col>
                                        </Row>
                                        <Row >
                                            <Col span="6" class="code-row-col-name">昵称</Col>
                                            <Col span="18" class="code-row-col-value">{{formItem.nickName | valueFilter}}</Col>
                                        </Row>
                                        <Row >
                                            <Col span="6" class="code-row-col-name">性别</Col>
                                            <Col span="18" class="code-row-col-value">{{formItem.sex | sexFilter}}</Col>
                                        </Row>
                                        <Row >
                                            <Col span="6" class="code-row-col-name">出生日期</Col>
                                            <Col span="18" class="code-row-col-value">{{formItem.birthday | valueFilter}}</Col>
                                        </Row>
                                        <Row >
                                            <Col span="6" class="code-row-col-name">民族</Col>
                                            <Col span="18" class="code-row-col-value">{{formItem.ethnic | valueFilter}}</Col>
                                        </Row>
                                        <Row >
                                            <Col span="6" class="code-row-col-name">婚姻状况</Col>
                                            <Col span="18" class="code-row-col-value">{{formItem.marital | valueFilter}}</Col>
                                        </Row>
                                        <Row >
                                            <Col span="6" class="code-row-col-name">文化程度</Col>
                                            <Col span="18" class="code-row-col-value">{{formItem.culture | valueFilter}}</Col>
                                        </Row>
                                    </CarouselItem>
                                    <CarouselItem style="padding-right: 30px">
                                        <Row >
                                            <Col span="6" class="code-row-col-name">职业</Col>
                                            <Col span="18" class="code-row-col-value">{{formItem.job | valueFilter}}</Col>
                                        </Row>
                                        <Row >
                                            <Col span="6" class="code-row-col-name">身份证</Col>
                                            <Col span="18" class="code-row-col-value">{{formItem.card | valueFilter}}</Col>
                                        </Row>
                                        <Row >
                                            <Col span="6" class="code-row-col-name">籍贯</Col>
                                            <Col span="18" class="code-row-col-value">{{formItem.origin | valueFilter}}</Col>
                                        </Row>
                                        <Row >
                                            <Col span="6" class="code-row-col-name">工作特点</Col>
                                            <Col span="18" class="code-row-col-value">{{formItem.jobCharact | valueFilter}}</Col>
                                        </Row>
                                        <Row >
                                            <Col span="6" class="code-row-col-name">患者来源</Col>
                                            <Col span="18" class="code-row-col-value">{{formItem.source | valueFilter}}</Col>
                                        </Row>
                                        <Row >
                                            <Col span="6" class="code-row-col-name">现住址</Col>
                                            <Col span="18" class="code-row-col-value">{{formItem.address | valueFilter}}</Col>
                                        </Row>
                                        <Row >
                                            <Col span="6" class="code-row-col-name">常驻地</Col>
                                            <Col span="18" class="code-row-col-value">{{formItem.resident | valueFilter}}</Col>
                                        </Row>
                                    </CarouselItem>
                                </Carousel>
                            </Col>
                        </Row>
                    </Card>
                    <Tabs value="1">
                        <TabPane name="1" label="主诉现病史" icon="ios-bookmarks">
                            <complaint v-on="{selectComplaint:selectComplaint}"></complaint>
                        </TabPane>
                        <TabPane name="2" label="既往史" icon="ios-clock">标签二的内容</TabPane>
                        <TabPane name="3" label="家族史" icon="person-stalker">标签三的内容</TabPane>
                        <TabPane name="4" label="个人史" icon="person">标签三的内容</TabPane>
                        <TabPane name="5" label="特殊记录" icon="ios-calendar">标签三的内容</TabPane>
                        <TabPane name="6" label="既往史问卷" icon="ios-monitor">标签三的内容</TabPane>
                    </Tabs>
                </div>
            </Col>
            <Col :span="span2">
                <!--<Card :bordered="false" :dis-hover="true">-->
                    <!--<p slot="title">-->
                        <!--<Icon type="ios-film-outline"></Icon>-->
                        <!--患者信息-->
                    <!--</p>-->
                <!--</Card>-->
                <!--<Card :bordered="false" :dis-hover="true">-->
                    <!--<p slot="title">-->
                        <!--<Icon type="ios-film-outline"></Icon>-->
                        <!--主诉信息-->
                    <!--</p>-->
                <!--</Card>-->
                <Button @click="toggle" v-show="!this.showBox" type="warning">
                    退出编辑
                </Button>
                <Tabs :value="selectPane" @on-click="clickTabs">
                    <TabPane name="selectPane" label="病情描述" icon="android-clipboard" :disabled="disabled">
                        <complaint-details :id="complaintId"></complaint-details>
                    </TabPane>
                    <TabPane name="2" label="执行总览" icon="android-clipboard" :disabled="disabled">
                        <execute-list ref="executeList"></execute-list>
                    </TabPane>
                    <TabPane name="7" label="治疗方案" icon="medkit" :disabled="disabled">
                        <treatment ref="treatment"></treatment>
                    </TabPane>
                    <TabPane name="8" label="医嘱执行" icon="android-checkbox-outline" :disabled="disabled">
                        <medical-execute ref="medicalExecute"></medical-execute>
                    </TabPane>
                    <TabPane name="10" label="执行预览" icon="android-checkbox-outline" :disabled="disabled">
                        <Tabs :value="selectPreview" @on-click="clickPreview">
                            <TabPane label="长期(项目)医嘱-执行记录" name="1">
                                <execute-preview ref="preview1" :type="1" :treatType="'2,3'" :itemType="'1'"></execute-preview>
                            </TabPane>
                            <TabPane label="长期(产品)医嘱-执行记录" name="2">
                                <execute-preview ref="preview2" :type="2" :treatType="'2,3'" :itemType="'2'"></execute-preview>
                            </TabPane>
                            <TabPane label="临时医嘱-执行记录" name="3">
                                <execute-preview ref="preview3" :type="3" :treatType="'1'" :itemType="'1,2'"></execute-preview>
                            </TabPane>
                        </Tabs>
                    </TabPane>
                    <TabPane name="9" label="病程记录" icon="clipboard" :disabled="disabled">
                        <course-record-list ref="courseRecordList"></course-record-list>
                    </TabPane>
                    <TabPane name="3" label="系统检查" icon="android-desktop" :disabled="disabled">标签二的内容</TabPane>
                    <TabPane name="4" label="皮肤分类" icon="ios-pulse-strong" :disabled="disabled">标签三的内容</TabPane>
                    <TabPane name="5" label="专科检查" icon="network" :disabled="disabled">标签三的内容</TabPane>
                    <TabPane name="6" label="诊断及治疗建议" icon="ios-compose-outline" :disabled="disabled">标签三的内容</TabPane>
                </Tabs>
            </Col>
        </Row>
    </Card>
</template>
<script>
    import complaint from '@/view/business/medical/Complaint.vue';
    import treatment from '@/view/business/medical/Treatment.vue';
    import complaintDetails from '@/view/business/medical/details/ComplaintDetails.vue';
    import medicalExecute from '@/view/business/medical/list/MedicalExecute.vue';
    import executeList from '@/view/business/medical/list/ExecuteList.vue';
    import executePreview from '@/view/business/medical/list/Execute.vue';
    import courseRecordList from '@/view/business/medical/list/TreatPlanCourseRecordList.vue';
    export default {
        components: {
            complaint,
            treatment,
            complaintDetails,
            medicalExecute,
            executeList,
            executePreview,
            courseRecordList
        },
        data () {
            return {
                span1: '10',
                span2: '14',
                showBox: true,
                patientURL: '/user/patient',
                formItem: {},
                complaintId: -1,
                selectPane: '1',
                selectPreview: '1',
                disabled: true,
                selectCarousel: 0,
                baseURL: '/user/print'
            }
        },
        filters: {
            valueFilter (value) {
                let temp = value
                if (temp === undefined || temp === '') {
                    temp = '无'
                }
                return temp
            },
            sexFilter (value) {
                let temp = ''
                if (value === 1) {
                    temp = '男'
                } else if (value === 2) {
                    temp = '女'
                } else {
                    temp = '无'
                }
                return temp
            }
        },
        methods: {
            init () {
                let url = this.patientURL + '/findById/' + this.$route.query.id
                this.$ajax.get(url).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.formItem = data
                        this.$store.state.app.patientId = data.id
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            toggle () {
                this.showBox = !this.showBox
                if (this.showBox) {
                    this.$store.state.app.complaintId = ''
                }
            },
            selectComplaint (id) {
                this.$store.state.app.complaintId = id
                this.complaintId = id
                this.toggle()
            },
            clickTabs (name) {
                // 选择治疗方案时
                if (name === '2') {
                    this.$refs.executeList.refresh()
                } else if (name === '7') {
                    this.$refs.treatment.refreshProductList()
                } else if (name === '8') {
                    this.$refs.medicalExecute.refreshList1()
                } else if (name === '9') {
                    this.$refs.courseRecordList.refresh()
                } else if (name === '10') {
                    this.$refs.preview1.refresh()
                    this.selectPreview = '1'
                }
                this.selectPane = name
            },
            clickPreview (name) {
                if (name === '1') {
                    this.$refs.preview1.refresh()
                } else if (name === '2') {
                    this.$refs.preview2.refresh()
                } else if (name === '3') {
                    this.$refs.preview3.refresh()
                }
                this.selectPreview = name
            },
            printMedical () {
                let url = this.$store.state.app.WEBROOT + '/user/print/medical?patientId=' + this.$route.query.id + '&userId=' + this.$store.state.app.loginUser.id
                window.open(url)
            },
            printExecute () {
                let url = this.$store.state.app.WEBROOT + '/user/print/allAdviceExecute?patientId=' + this.$route.query.id + '&userId=' + this.$store.state.app.loginUser.id
                window.open(url)
            },
            printCourse () {
                let url = this.$store.state.app.WEBROOT + '/user/print/courseRecords?patientId=' + this.$route.query.id + '&userId=' + this.$store.state.app.loginUser.id
                window.open(url)
            }
        },
        watch: {
            '$store.state.app.complaintId': function (val, oldVal) {
                if (val !== '') {
                    this.disabled = false
                } else {
                    this.selectPane = '1'
                    this.disabled = true
                }
            },
            showBox: function (val, oldVal) {
                if (val) {
                    this.span1 = '10'
                    this.span2 = '14'
                } else {
                    this.span1 = '0'
                    this.span2 = '24'
                }
            }
        },
        beforeRouteEnter (to, from, next) {
            next(vm => {
                vm.init()
            })
        },
        beforeRouteLeave (to, from, next) {
            this.$store.state.app.complaintId = ''
            next()
        }
    }
</script>
<style>
    .code-row-col-name{
        text-align: right;
        border: 1px solid #F7FBFF;
        background-color: #EDF3F4;
    }
    .code-row-col-value{
        padding-left: 10px;
        border: 1px solid #D5E4F1;
    }
</style>